<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        1. Vue中常用的按键别名
            * 回车 `enter`
            * 删除 `delete` (捕获"删除"和"退格"键)
            * 退出 `esc`
            * 空格 `space`
            * 换行 `tab` (特殊,必须配合keydown使用)
            * 上 `up`
            * 下 `down`
            * 左 `left`
            * 右 `right`
        2. Vue未提供别名的按键,可以使用按键原石的key值去绑定,但注意要转为kebab-case (短横线命名)
        3. 系统修饰键(用法特殊):`ctrl`\`alt`\`shift`\`meta`(系统徽标键)
            1. 配合keyup使用: 按下修饰键同时,再按下其他键,随后释放其他键,事件才被触发.
            2. 配合keydown使用: 长长触发
        4. 也可以使用keyCode去指定具体的按键(不推荐)
        5. `Vue.config.keyCodes.自定义键名 = 键码`,可以去定制按键别名
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        <input type="text" placeholder="按下回车提示输入" @keyup.Enter="showInfo">
        <input type="text" placeholder="按下大小写转换提示输入" @keyup.caps-lock="showInfo">
        <input type="text" placeholder="按下Tab提示输入" @keydown.tab="showInfo">
        <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
        <input type="text" placeholder="按下ctrl+y提示输入" @keydown.ctrl.y="showInfo">

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止Vue启动时生成生产提示
    Vue.config.keyCodes.huiche = 13;
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷'
        },
        methods: {
            showInfo(e) {
                console.log(e.key,e.keyCode);
                // if (e.keyCode !== 13) { return; }
                console.log(e.target.value);
            }
        },
    });
</script>

</html>